<!--  -->
<template>
  <div class="wrapper">
    <div class="wrapper-box">
      <img :src="imgUrl"
           width="80"
           height="80"
           alt="">
      <div class="wrapper__input">
        <input v-model="username"
               placeholder="请输入用户名"
               type="text"
               class="wrapper__input__content">
      </div>
      <div class="wrapper__input">
        <input v-model="password"
               placeholder="请输入密码"
               type="text"
               class="wrapper__input__content">
      </div>
      <div class="wrapper__commit">
        <a href="javascript:void(0);"
           @click="handleLogin">登录</a>
      </div>
      <div class="login_register">
        <div class="wrapper__login-btn">立即注册</div>
        <div class="sep">|</div>
        <div class="wrapper__login-link">忘记密码</div>
      </div>

    </div>
    <Toast v-if="show"
           :message="toastMessage" />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '../../utils/request'
import Toast, { useToastEffect } from '../../components/Toast'

const useLoginEffect = (showToast) => {
  const router = useRouter()
  const data = reactive({
    username: '',
    password: ''
  })
  // async/await语法
  const handleLogin = async () => {
    try {
      const { username, password } = data
      if (!username) {
        showToast('请输入用户名')
        return
      }
      if (!password) {
        showToast('请输入密码')
        return
      }
      const result = await post('/api/user/login', {
        username: data.username,
        password: data.password
      })
      if (result?.code === 200) {
        localStorage.isLogin = true
        router.push({ name: 'Home' })
      } else {
        showToast('登录失败')
      }
    } catch (e) {
      showToast('请求失败')
    }
  }
  const { username, password } = toRefs(data)
  return { username, password, handleLogin }
}

export default {
  name: 'Login',
  components: { Toast },
  setup () {
    // const getResult = async () => {
    //   const resp = await fetch('https://www.fastmock.site/mock/67e2fcd4543a142480529ee31b152d43/jd/api/user/login', {
    //     method: 'POST',
    //     headers: {
    //       Accept: 'application/json',
    //       'Content-type': 'application/json'
    //     },
    //     body: JSON.stringify({
    //       username: data.username,
    //       password: data.password
    //     })
    //   })
    //   const resData = await resp.json()
    //   if (resData?.code === 200) {
    //     localStorage.isLogin = true
    //     router.push({ name: 'Home' })
    //   }
    // }
    // getResult()

    const { show, toastMessage, showToast } = useToastEffect()
    const { username, password, handleLogin } = useLoginEffect(showToast)

    return {
      username,
      password,
      handleLogin,
      show,
      toastMessage
    }
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  margin: 0 0.4rem;
  .wrapper-box {
    transform: translateY(50%);
  }
  img {
    background-color: burlywood;
    border-radius: 50%;
    margin-bottom: 0.1rem;
  }
  .wrapper__input {
    .wrapper__input__content {
      width: 100%;
      margin-top: 0.2rem;
      padding: 0.16rem 0.2rem;
      box-sizing: border-box;
      border-radius: 0.03rem;
      font-size: 0.16rem;
      background-color: #e1e3e44d;
      border-radius: 1rem;
      &::placeholder {
        color: #1e82f5c5;
      }
    }
  }
  .wrapper__commit {
    margin-top: 0.3rem;
    a {
      text-decoration: none;
      color: #ffffff;
      background-color: #1e82f5c5;
      width: 100%;
      display: inline-block;
      padding: 0.18rem 0;
      font-size: 0.16rem;
      border-radius: 1rem;
    }
  }
  .login_register {
    margin-top: 0.2rem;
    .sep {
      margin: 0 0.1rem;
    }
    div {
      display: inline-block;
      font-size: 0.14rem;
      color: #b3b3b3;
    }
  }
}
</style>
